<script lang="ts" setup>
import { ref } from 'vue'
// 学习vue3-ts要注意，语法大部分都泛型有关
const count = ref<number>(100)

interface Person {
  name: string
  age: number
}

// const person = ref<Person>()
const person = ref({} as Person)

setTimeout(() => {
  person.value = {
    name: '李四',
    age: 90
  }
}, 2000)
</script>

<template>
  <div class="">
    Ref
    <p>count is {{ count }}</p>
    <!-- 可选链操作符 -->
    <!-- <p>name is {{ person?.name }}</p>
    <p>age is {{ person?.age }}</p> -->
    <!-- 如果上面用的是断言，则可以直接使用 -->
    <p>name is {{ person.name }}</p>
    <p>age is {{ person.age }}</p>
  </div>
</template>

<style scoped></style>
